@mixin transition($v) {
  transition: $v;
}

@mixin boxShadow($v) {
  -webkit-box-shadow: $v;
  box-shadow: $v;
}

@mixin borderRadius($v) {
  -ms-border-radius: &v;
  border-radius: $v;
}

/*4.2.1 导航条
  name:      hui-nav
  example:
    <header class="hui-nav-wrapper">
      <nav class="hui-nav hui-nav-collapse" role="navigation" id="hui-navbar">
        <ul class="clearfix">
          <li class="current"><a href="/">首页</a></li>
          <li><a href="#">核心</a></li>
          <li><a href="#">扩展</a></li>
          <li class="hui-dropdown hui-dropdown-hover">
            <a href="#" class="hui-dropdown-link">一级导航 <i class="hui-iconfont">&#xe6d5;</i></a>
            <ul class="hui-dropdown-menu radius box-shadow">
              <li class="hui-menu-item"><a href="#">二级导航</a></li>
              <li class="hui-menu-item"><a href="#">二级导航<i class="arrow hui-iconfont">&#xe6d7;</i></a>
                <ul>
                  <li class="hui-menu-item">
                    <a href="javascript:;" class="hui-dropdown-link">三级菜单<i class="arrow hui-iconfont">&#xe6d7;</i></a>
                    <ul>
                      <li class="hui-menu-item"><a href="javascript:;">四级菜单</a></li>
                      <li class="hui-menu-item"><a href="javascript:;">四级菜单</a></li>
                      <li class="hui-menu-item"><a href="javascript:;">四级菜单</a></li>
                    </ul>
                  </li>
                  <li class="hui-menu-item"><a href="#">三级导航</a></li>
                </ul>
              </li>
              <li class="hui-menu-item"><a href="#">二级导航</a></li>
              <li class="hui-menu-item disabled"><a href="javascript:;">二级菜单</a></li>
            </ul>
          </li>
          <li><a href="#">联系我们</a></li>
        </ul>
      </nav>
    </header>
  explain: 鼠标经过状态a:hover，当前选中状态li:current。
*/

/*logo*/
.hui-logo {
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: auto 100%;
  &:hover {
    text-decoration: none;
  }
}

/*导航条*/
.hui-nav-wrapper {
  height: 45px;
  .hui-nav-bar {
    position: relative;
    z-index: 1030;
    background-color: #fff;
    .hui-layout-content {
      position: relative;
      .hui-nav-userbar {
        right: 0px;
      }
    }
    &.hui-nav-black {
      background-color: #222;
    }
    &.hui-nav-fixed-top {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1030;
      box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
    }
    .hui-logo {
      height: 44px;
      line-height: 44px;
      margin-right: 10px;
      float: left;
      font-size: 16px;
    }

    .hui-slogan {
      font-size: 12px;
      cursor: default;
    }
  }
}

/*导航*/
.hui-nav {
  z-index: 1;
  > ul {
    font-size: 0;
    line-height: 0;
    >li,
    >li > a {
      line-height: 44px;
      font-size: 14px;
    }
    >li {
      position: relative;
      float: left;
      text-align: center;
      >a {
        display: inline-block;
        text-align: center;
        padding: 0 10px;
      }
      >a:hover,
      &.current>a {
        background-color: rgba(255, 255, 255, 0.2);
        text-decoration: none;
        @include transition(background-color 0.3s ease 0s);
      }
    }
  }
}

@media (max-width: 767px) {
  .hui-logo {
    margin-right: 0
  }

  .hui-nav-wrapper {
    height: 45px!important;
    .hui-nav-bar {
      .hui-logo {
        height: 44px!important;
        line-height: 44px!important;
      }
      .hui-nav {
        display: none !important;
        float: none!important;
        > ul > li {
          width: 100%;
          text-align: left;
          border-bottom: solid 1px #eee;
          >a {
            display: block;
            padding: 0 15px;
            text-align: left;
          }
          &.hui-dropdown.open>.hui-dropdown-menu {
            display: none;
          }
          &.hui-dropdown>.hui-dropdown-link>.hui-iconfont {
            display: none;
          }
        }
        > ul > li,
        > ul > li >a {
          height: 44px!important;
          line-height: 44px!important;
        }
        &.hui-nav-collapse {
          ul,
          ul > li {
            width: 100%;
            display: block;
          }
        }
      }
    }
  }

  .js-nav-active .hui-nav-collapse {
    position: absolute;
    display: block;
    float: none;
    clear: both;
    max-height: 0;
    clip: rect(0 0 0 0);
    margin-left: -15px;
    margin-right: -15px;
    overflow: hidden;
    @include transition(max-height 284ms ease 0s);
    &.closed {
      max-height: none;
    }
  }
  .hui-nav-collapse.opened {
    max-height: 9999px;
  }
}

/*导航条风格-黑色*/
.hui-nav-black {
  background-color: #222;
  border-bottom: #080808 1px solid;
  @include boxShadow(0 0 4px #333333);
  .hui-logo {
    color: #fff;
    color: #eee;
  }

  .navbar-userbar {
    color: #fff;
  }
  .hui-nav{
    > ul > li,
    > ul > li > a{
      color: #fff;
    }
    > ul > li > a:hover,
    > ul > li.current > a {
      color: #fff;
    }
  }
}

@media (max-width: 767px) {
  .hui-nav-black {
    .hui-nav > ul >li {
      border-bottom: solid 1px #222;
      > a:hover,
      &.current>a {
        background: #777;
      }
    }
  }
}

/*面包导航*/
.hui-nav-toggle,
a.hui-nav-toggle {
  position: absolute;
  top: 0px;
  right: 15px;
  font-size: 20px;
  color: #999;
  padding: 6px 11px;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  &:hover {
    text-decoration: none;
    color: #fff
  }
}

@media (max-width: 767px) {
  .mainnav>ul>li {
    font-size: 1.125em
  }
}

@media (max-width: 480px) {
  .mainnav>ul>li {
    text-align: center;
    width: 20%;
    >a {
      padding: 0;
      padding: 0;
      display: block
    }
  }
}

/*4.2.2 面包屑导航
  name:      hui-breadcrumb
  example:
    <nav class="hui-breadcrumb">
      <div class="hui-layout-content">
        <i class="hui-iconfont">&#xe67f;</i> <a href="/" class="c-primary">首页</a><span class="c-gray en">&gt;</span><a href="#">组件</a><span class="c-gray en">&gt;</span><span class="c-gray">当前页面</span>
      </div>
    </nav>
*/
.hui-breadcrumb {
  border-bottom: 1px solid #E5E5E5;
  overflow: hidden;
  padding: 10px 0;
  span {
    padding: 0 5px;
  }
}

/*4.2.3 翻页导航
  name:      hui-pagination
  example:    <div class="hui-pagination" id="hui-pagination"></div>
  explain:    需要调用pagenav.cn.js
*/
.hui-pagination {
  float: none;
  clear: both;
  font-size: 0;
  font-family: Arial, Helvetica, sans-serif;
  padding: 18px 0;
  text-align: center;
  span,
  a,
  b {
    font-size: 14px;
    margin-right: 5px;
    overflow: hidden;
    padding: 3px 8px;
  }
  a {
    border: 1px solid #CCDBE4;
    cursor: pointer;
  }
  b {
    color: #000;
  }
  .mor {
    padding: 3px;
    font-weight: bold;
  }
}

/*4.2.4 顶部导航
  name:      hui-topnav
  sample:
    <div class="hui-topnav">
      <div class="clearfix">
        <div class="f-l">您好，欢迎来到Hui！</div>
        <div class="f-r">
          <span class="r_nav">[ <a rel="nofollow" href="javascript:login();">登录</a> ]</span><span class="hui-pipe">|</span><span class="r_nav">[ <a href="javascript:register();" rel="nofollow">注册</a> ]</span><span class="hui-pipe">|</span><span class="r_nav"><a title="收藏" href="javascript:addFavorite();">收藏本站</a></span><span class="hui-pipe">|</span><span class="r_nav"><a href="javascript:void(0)" onclick="setHome(this);" title="设为首页">设为首页</a>
          </span>
        </div>
      </div>
    </div>
*/
.hui-topnav {
  height: 30px;
  line-height: 30px;
  background-color: #f7f7f7;
  border-bottom: 1px solid #EBEBEB;
  font-size: 12px;
  .topbar {
    background-color: #ECECEC;
    border-bottom: 1px solid #ddd;
    a {
      margin-right: 5px;
    }
  }
  .r_nav {
    display: inline-block;
    color: #999;
  }
}

/*4.2.5 向导
  name:      hui-steps
  sample:
  <div class="hui-steps four">
    <span class="hui-steps-item">第一步</span>
    <span class="hui-steps-item active">第二步</span>
    <span class="hui-steps-item disabled">第三步</span>
    <span class="hui-steps-item disabled">第四步</span>
  </div>
*/
.hui-steps {
  display: block;
  position: relative;
  padding: 1em 2em 1em 3em;
  vertical-align: top;
  background-color: #FFF;
  color: #888;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  @include transition(all .1s ease);
  &:after{
    position: absolute;
    z-index: 2;
    content: '';
    top: 0;
    right: -1.45em;
    border-bottom: 1.5em solid transparent;
    border-left: 1.5em solid #FFF;
    border-top: 1.5em solid transparent;
    width: 0;
    height: 0;
    @include transition(all .1s ease);
  }
  cursor: pointer;
  font-size: 0;
  @include boxShadow(0 0 0 1px rgba(0, 0, 0, .1));
  border-radius: .3125rem;
  line-height: 1;
  .hui-steps-item {
    display: inline-block;
    position: relative;
    padding: 1em 2em 1em 3em;
    vertical-align: top;
    background-color: #FFF;
    color: #888;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 1rem;
    @include transition(all .1s ease);
    &:after{
      position: absolute;
      z-index: 2;
      content: '';
      top: 0;
      right: -1.45em;
      border-bottom: 1.5em solid transparent;
      border-left: 1.5em solid #FFF;
      border-top: 1.5em solid transparent;
      width: 0;
      height: 0;
      @include transition(all .1s ease);
    }
    &:first-child {
      padding-left: 1.35em;
      border-radius: .3125em 0 0 .3125em;
    }
    &:last-child {
      border-radius: 0 .3125em .3125em 0;
      margin-right: 0;
      &:after {
        display: none
      }
    }
    &:only-child {
      border-radius: .3125em
    }
    &:hover,
    &.hover {
      background-color: #F7F7F7;
      color: rgba(0, 0, 0, .8);
      &:after {
        border-left-color: #F7F7F7
      }
    }
    &.down,
    &:active {
      background-color: #F0F0F0;
      &:after{
        border-left-color: #F0F0F0;
      }
    }
    &.active {
      cursor: auto;
      background-color: #428BCA;
      color: #FFF;
      font-weight: 700;
      &:after {
        border-left-color: #428BCA
      }
    }
    &.disabled {
      cursor: auto;
      background-color: #FFF;
      color: #CBCBCB;
      &:after {
        border: 0;
        background-color: #FFF;
        top: .42em;
        right: -1em;
        width: 2.15em;
        height: 2.15em;
        -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        transform: rotate(-45deg);
        box-shadow: -1px -1px 0 0 rgba(0, 0, 0, .1) inset
      }
    }
  }
  &.attached {
    margin: 0;
    border-radius: .3125em .3125em 0 0;
    .hui-steps-item {
      &:first-child {
        border-radius: .3125em 0 0;
      }
      &:last-child {
        border-radius: 0 .3125em 0 0;
      }
    }
    &.bottom {
      margin-top: -1px;
      border-radius: 0 0 .3125em .3125em;
      .hui-steps-item {
        &:first-child {
          border-radius: 0 0 0 .3125em;
        }
        &:last-child {
          border-radius: 0 0 .3125em;
        }
      }
    }
  }

  &.one {
    > .hui-steps-item {
      width: 100%;
    }
  }
  &.two {
    > .hui-steps-item {
      width: 50%;
    }
  }
  &.three {
    > .hui-steps-item {
      width: 33.333%;
    }
  }
  &.four {
    > .hui-steps-item {
      width: 25%;
    }
  }
  &.five {
    > .hui-steps-item {
      width: 20%;
    }
  }
  &.six {
    > .hui-steps-item {
      width: 16.666%;
    }
  }
  &.seven {
    > .hui-steps-item {
      width: 14.285%;
    }
  }
  &.eight {
    > .hui-steps-item {
      width: 12.5%;
    }
  }
  &.small {
    .hui-steps-item {
      font-size: .8rem
    }
  }
  &.large {
    .hui-steps-item {
      font-size: 1.25rem
    }
  }
}

/*兼容写法
  sample:
  <div class="hui-steps-ie clearfix">
    <a class="hui-steps-ie-item active" href="#">第一步<em class="arrow"></em></a>
    <a class="hui-steps-ie-item" href="#">第二步<em class="arrow"></em></a>
    <a class="hui-steps-ie-item" href="#">第三步<em class="arrow"></em></a>
  </div>
*/
.hui-steps-ie {
  background-color: #eaf4fd;
  border: solid 1px #afcfcc;
  height: 44px;
  line-height: 44px;
  .hui-steps-ie-item {
    position: relative;
    float: left;
    height: 44px;
    line-height: 44px;
    cursor: pointer;
    padding: 0 20px 0 40px;
    background: url(../images/steps/step_bg.png) repeat-x 0 center;
    .arrow {
      height: 44px;
      line-height: 44px;
      position: absolute;
      right: -21px;
      top: 0;
      width: 21px;
      height: 44px;
      display: block;
      cursor: pointer;
      background: url(../images/steps/step_arrow.png) no-repeat 0 center;
      z-index: 50;
    }
    &.active {
      background-image: url(../images/steps/step_bg-active.png);
      color: #fff;
      z-index: 100;
      .arrow {
        background-image: url(../images/steps/step_arrow-active.png)
      }
    }
  }
}

/*4.2.6 纵向导向tab导航
  name:     hui-verticalTab
  sample:
    <div class="hui-verticalTab">
      <a class="hui-verticalTab-item" href="#">导航一<em></em></a>
      <a class="hui-verticalTab-item active" href="#">导航二<em></em></a>
      <a class="hui-verticalTab-item" href="#">导航三<em></em></a>
      <a class="hui-verticalTab-item" href="#">导航四<em></em></a>
    </div>
*/
.hui-verticalTab {
  background: #fff url(../images/verticalTab/tab_bg.png) repeat-y 0 0;
  width: 38px;
  .hui-verticalTab-item {
    position: relative;
    display: block;
    width: 18px;
    height: auto;
    text-align: center;
    position: relative;
    padding: 26px 10px 6px 10px;
    background: url(../images/verticalTab/tabNav.png) no-repeat 0 0;
    em {
      position: absolute;
      left: 0;
      bottom: -20px;
      width: 38px;
      height: 20px;
      background: url(../images/tabNav_right.png) no-repeat 0 0;
      z-index: 50
    }
    &.active {
      background-image: url(../images/verticalTab/tabNav-active.png);
      color: #fff;
      z-index: 99;
      em {
        background-image: url(../images/verticalTab/tabNav_right-active.png)
      }
    }
  }
}

/*4.2.7 横向导向tab导航
  name:      hui-acrossTab
  sample:
  <ul class="hui-acrossTab">
    <li>导航一<i></i><em></em></li>
    <li class="active">导航二<i></i><em></em></li>
    <li>导航三<i></i><em></em></li>
  </ul>
*/
.hui-acrossTab {
  height: 29px;
  background-repeat: repeat-x;
  background-position: 0 0;
  padding-top: 1px;
  background-image: url(../images/acrossTab/acrossTab-bg.png);
  li {
    position: relative;
    float: left;
    height: 29px;
    line-height: 29px;
    font-size: 12px;
    cursor: pointer;
    padding: 0 30px;
    white-space: nowrap;
    color: #282828;
    background-position: 0 0;
    background-image: url(../images/acrossTab/acrossTab-bg.png);
    em {
      position: absolute;
      width: 23px;
      height: 29px;
      right: -20px;
      top: 0;
      z-index: 50;
      background-position: right -30px;
      background-image: url(../images/acrossTab/acrossTab-bg.png)
    }
    &:hover {
      background-position: 0 -60px;
      em {
        background-position: right -90px
      }
    }
    &.active {
      background-position: 0 -120px;
      z-index: 99;
      em {
        background-position: right -150px
      }
    }
    i {
      position: absolute;
      display: block;
      width: 13px;
      height: 13px;
      top: 50%;
      margin-top: -6px;
      right: 5px;
      font-size: 0;
      line-height: 0;
      cursor: pointer;
      background-image: url(../images/acrossTab/acrossTab-close.png);
      background-repeat: no-repeat;
      background-position: 0 0;
      &:hover {
        background-position: 0 bottom;
      }
    }
  }
  li,
  li em {
    background-repeat: no-repeat;
    background-position: 0 0;
  }
}
